<template>
  <div class="body">
    <div class="container">
      <el-input placeholder="" prefix-icon="el-icon-search" v-model="content" ref="inputRef"
        @keyup.native="handleSearch()">
        <p>{{ content }}</p>
      </el-input>

    </div>

    <div class="result">
      <div v-for="(item,index) in searchResult" :key="index" class="childResult" @click="enterDetail(index)">
        <div class="pic" :style="{ backgroundImage: 'url(' + item.url+')' }">
      <div v-for="(item, index) in searchResult" :key="index" class="childResult" @click="enterDetail(index)">
        <div class="pic" :style="{ backgroundImage: 'url(' + item.url + ')' }">

        </div>
        <div class="spacer"></div>
        <div class="text">
          <h2>
            {{ item.scene }}
          </h2>
          <i class="el-icon-map-location"></i>{{ item.city }}
          <P></P>
          <i class="el-icon-position"></i>{{ item.location }}
        </div>
      </div>
    </div>
  </div>

</template>
<script>



export default {
  data() {
    return {
      userId: this.$route.params.userId,
      txUrl:
        "",
      userName: "",
      content: "",
      searchResult: []
    };
  },
  methods: {
    hqy() {
      let _this = this;
      const axios = require("axios");
      let data = JSON.stringify({
        "userID": _this.userId,
      });
      let config = {
        method: "post",
        maxBodyLength: Infinity,
        url: "http://8.134.215.31:11112/userMessage/get",
        headers: {
          "Content-Type": "application/json",
          "token": localStorage.getItem("JWT_TOKEN"),
        },
        data: data,
      };
      axios
        .request(config)
        .then((response) => {
          _this.userName = response.data.data.username;
          _this.txUrl = response.data.data.txUrl;
          const param1 = _this.userId;
          const param2 = _this.txUrl;
          const param3 = _this.$route.name;
          const param4 = _this.userName;
          _this.$emit("childEvent", { param1, param2, param3, param4 });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSearch() {
      //console.log(this.content);
      const axios = require('axios');
      let data = JSON.stringify({
        "content": this.content
      });

      let config = {
        method: 'post',
        maxBodyLength: Infinity,
        url: 'http://8.134.215.31:11112/searchPage/get',
        headers: {
          'Content-Type': 'application/json'
        },
        data: data
      };
      axios.request(config)
        .then((response) => {
          //console.log(JSON.stringify(response.data));
          var that = response.data.data;
          this.searchResult = that
        })
        .catch((error) => {
          console.log(error);
        });
      //请求数据
    },
    enterDetail(index) {
      this.$router.push(`/home/concreteScene/${this.searchResult[index].scene}/${this.userId}/${this.searchResult[index].sceneID}/${this.searchResult[index].city}`);
    }

  },
  mounted() {

    this.content = this.$route.params.content
    this.hqy();
    //请求数据
    const searchIcon = this.$refs.inputRef.$el.querySelector(".el-icon-search");
    searchIcon.addEventListener("click", this.handleSearch);

    const axios = require('axios');
    let data = JSON.stringify({
      "content": this.content
    });

    let config = {
      method: 'post',
      maxBodyLength: Infinity,
      url: 'http://8.134.215.31:11112/searchPage/get',
      headers: {
        'Content-Type': 'application/json'
      },
      data: data
    };

    axios.request(config)
      .then((response) => {
        //console.log(JSON.stringify(response.data));
        var that = response.data.data;
        this.searchResult = that
      })
      .catch((error) => {
        console.log(error);
      });

  },
};
</script>
<style scoped>
.body {
  user-select: none;
  height: auto;
  min-height: 1000px;
  width: 100%;
}

.container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 200px;
  background-color: white;
  background-size: 100% 100%;
}

.el-input {
  display: block;
  width: 50%;
  margin: 60px auto;
}

::v-deep .el-input__inner {
  height: 50px;
  background-color: rgba(74, 82, 89);
  color: white;
  text-indent: 2em;
  font-size: 18px;
}

::v-deep .el-input__inner::placeholder {
  text-indent: 2em;
  font-size: 17px;
  color: pink;
}

::v-deep .el-input__prefix .el-input__icon {
  line-height: 50px;
  font-size: 24px;
  color: pink;

}

::v-deep .el-input__prefix:hover {
  cursor: pointer;
}

.result {
  overflow: auto;
  width: 60%;
  height: auto;
  min-height: 800px;
  margin: 0 auto;
}

.childResult {
  display: flex;
  top: 50px;
  overflow: hidden;
  width: 99%;
  height: 250px;
  background-color: white;
  margin-bottom: 50px;
  border: 1px rgba(128, 128, 128, 0.5) solid;
  border-radius: 15px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.childResult:hover {
  cursor: pointer;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

.pic {
  flex: 40%;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  height: 85%;
  background-size: 100% 100%;
  box-sizing: border-box;
  margin: auto 12px;
}

.spacer {
  flex: 5%;
}

.text {
  flex: 55%;
  height: 100%;
}
</style>